import React,{Component} from 'react'
import {connect} from 'dva';
import {PLATFORM_NUMBER} from "../../../enum"
import { Button, Modal, Form, Input, Radio,Cascader,message,Select  } from 'antd';
const FormItem = Form.Item;

@connect(({cooperativeStore})=>({
    list: cooperativeStore.list,
    roleArr:cooperativeStore.RoleByUserId,
  }))
class ModefyAccount extends React.Component{
    state={
      ByUserId:[],
      cooper:[],
      roleId:'',

        visible: false
      }
      componentDidMount(){
        
      }
      handleOk = e => {
        let status = false;
        this.props.status(status);
      };
    
      handleCancel = e => {
        let status = false;
        this.props.status(status);
      };


      handleRoleId=(e,obj)=>{
        // const aaa=e,
        this.state.roleId=obj.key
      }


     
    handleSubmit = () => {
      const {val,visible}=this.props;
        let userInfo = this.props.form.getFieldsValue();
        // userInfo["userId"]=1
        console.log("1111",userInfo)
        this.props.form.validateFields((err,values)=>{
          console.log("values--------:",values)
          if(!err){
            const { dispatch } = this.props;
            dispatch({
              type:'cooperativeStore/updateUserBasicInfo',
              payload:{
                data:{
                  // "username": values.username,
                  "email": values.email,
                  "mobile":values.mobile,
                  "name": values.name,
                  "roleId": val.roleId,
                  "parentId": 0,
                  "platform": PLATFORM_NUMBER.SUPPLIER_USER,
                  "userId": val.userId
                }
              }
            })
            //修改后进行刷新
            this.props.handleRefresh()
            this.handleCancel()
          }
        })  
        message.success(`修改成功！`)
     };
    render() {
        function handleChange(value) {
            console.log(`selected ${value}`);
        }
        const { visible, val, form } = this.props;
        const { getFieldDecorator } = form;
        const formItemLayout ={
          labelCol:{
            xs:24,
            sm:8
          },
          wrapperCol:{
            xs:24,
            sm:12
          }
        }

        const {cooper,ByUserId}=this.state;
        const {roleArr}=this.props;
        return (
          <div>
        {/* <Button type="link" onClick={this.showModal}>
          编辑
        </Button> */}
        
        <Modal
          title="编辑子账号"
          visible={visible}
          onOk={this.handleSubmit}
          onCancel={this.handleCancel}
        >
          <Form layout={"horizontal"} onSubmit={this.handleSubmit}>
                <FormItem label="账号" {...formItemLayout}>
                  {
                    getFieldDecorator('username', {
                      initialValue:val.username,
                      rules: [{ required: true, message: '请填写账号!' }],
                  })(<Input disabled="disabled"/>)}
                </FormItem>
                <FormItem label="姓名" {...formItemLayout}>
                  {
                    getFieldDecorator('name', {
                      initialValue:val.name,
                      rules: [{ required: true, message: '请填写姓名!' }],
                  })(<Input />)}
                </FormItem>
                <FormItem label="邮箱" {...formItemLayout}>
                  {
                    getFieldDecorator('email', {
                      initialValue:val.email,
                      rules: [
                        { required: true, message: '请填写邮箱!' },
                        {pattern:RegExp(/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/),message:'请填写正确的邮箱！'}
                      ],
                  })(<Input />)}
                </FormItem>
                <FormItem label="电话" {...formItemLayout}>
                  {
                    getFieldDecorator('mobile', {
                      initialValue:val.mobile,
                      rules: [
                        { required: true, message: '请填写电话!' },
                        {pattern:RegExp(/^((\+)?86|((\+)?86)?)0?1[3458]\d{9}$/),message:'请填写正确的手机号码！'}
                      ],
                  })(<Input />)}
                </FormItem>
                <FormItem label="角色分组" {...formItemLayout}>
                  {
                    getFieldDecorator('roleName', {
                      initialValue:val.roleName,
                      rules: [{ required: true, message: '请填写角色分组!' }],
                  })(
                    <Select placeholder="选择角色分组" style={{ width: 236 }} onSelect={this.handleRoleId}>
                      {roleArr.map(it =>{
                        return(
                          <Select.Option key={it.roleId} value={it.roleId}>
                              {it.roleName}
                          </Select.Option>
                        )
                      } )}
                    </Select>
                  )}
                </FormItem>
              </Form>
        </Modal>
      </div>
        );
    }
}
export default Form.create()(ModefyAccount);